<!-- <template>
  <div><input type="text"  v-model="firstName"><input type="text"  v-model="sencendName"></div>
  
  <div>姓名：{{ allname }}</div>
</template>
<script setup>
   import { ref,computed } from 'vue';
   let allname= computed(()=>{
   return firstName.value*sencendName.value
   })
    
    
    
  let firstName=ref('')
  let sencendName=ref('')
  
</script> -->



<!-- <template>
  <div><input type="text"  v-model="noneName"></div>
  
    <ul>
      <li v-for="arrs in allname " :key="arrs">{{ arrs }}</li>
    </ul>
 
</template>
<script setup>
   import { ref,computed } from 'vue';
   let allname= computed(()=>{
    let keyword=noneName.value.toLowerCase()//用来让搜索不区分大小写
   return arr.value.filter(arrs=>
    arrs.toLowerCase().includes(keyword)//快速判断子字符串存在性且不区分大小写，也就是不区分大小写的晒选
   )
   })
    
    
    
  let arr=ref([
    'tangboer','开凿','概念神','少糖'
  ])
  let noneName=ref('')
</script> -->


<!-- <template>
  <input type="text"  placeholder="请输入日期" v-model="myTime">
  <div>{{ fTime }}</div>
</template>
<script setup>
  import { ref,computed } from 'vue';
  import { format } from 'date-fns';
  const fTime =computed(()=>{
    try{
      return format(new Date(myTime.value),'yyyy年MM月dd日 HH:mm:ss')
    }catch{
      return '格式有误'
    }
  })
  const myTime=ref('')
</script> --> 

<!-- 通过computed属性完成输入颜色改变样式 -->
<!-- <template>
  <input type="text" placeholder="请输入颜色编号" v-model="myCol">
  <div class="bClo" :style="colFn">动我就变脸</div>
</template>
<script setup>
  import {ref,computed} from 'vue'
  let myCol=ref('#')
  let colFn=computed(()=>({
     backgroundColor:myCol.value.trim()||'#ffffff'
  })
  )
</script>
<style scoped>
.bClo{
  width: 100%;
  height: 200px;
  margin-top: 20px;
}
</style> -->


<!-- <template>
<Nihao v-for="item in arr":title="item.title":name="item.name"></Nihao>
</template>
<script setup>
  import { ref } from 'vue';
  import Nihao from './components/nihao.vue';
  let arr=ref([
    { id:'1',
      title:'Hello',
      name:'开凿',
    },
    { id:'2',
      title:'Hello',
      name:'tangboer',
    },
    { id:'3',
      title:'Hello',
      name:'少坤',
    }
    
    
  ])
</script> -->

<!-- 侦听器侦听点击次数 -->
<!-- <template>
  <div><button @click="jsq">增加数值</button></div>
  <div>当前数值:{{ shuzhi }}</div>
</template>
<script setup>
  import { ref, watch } from 'vue';
  let shuzhi=ref(0)
  watch(shuzhi,(news,olds)=>{
    console.log('新',news,'旧',olds);
  })
  let jsq=function(){
    shuzhi.value++
  }
</script> -->

<!-- 自定义事件传值 -->
<!-- <template>
 <div><button type="button" @click="js">点击次数{{ cont }}</button></div>
 <ContJs :cont="cont"></ContJs>
</template>
<script setup>
  import { ref } from 'vue';
  import ContJs from './components/ContJs.vue';
import { watch } from 'vue';
  const cont=ref(0)
  watch(cont,(newCont,oldCont)=>{
    console.log('新',newCont,'旧',oldCont);
    
  })
  const js=function(){
     cont.value++
  }
</script> -->

<!-- 插槽的基础用法 -->
<!-- <template>
 <div>
  <h1><Slots>其实我是自定义标题</Slots></h1>
  <li><Slots>我是自定义内容</Slots></li>
 </div>
</template>
<script setup>
  import Slots from './components/Slots.vue';

</script> -->

<!-- 使用自定义事件传值完成模拟信息发送 -->
<!-- <template>
  <h1>用户信息</h1>
  <div v-for="item in arr">用户名：{{ item.author  }}</div>
  <div v-for="item in arr">邮箱：{{ item.mailbox  }}</div>
  <button type="button" @click="Sends">点击发送信息</button>
  
  <EmSend v-for="item in arr":author="item.author":mailbox="item.mailbox" :Send="Send"></EmSend>
  

</template>
<script setup>
  import { ref } from 'vue';
  import EmSend from './components/EmSend.vue';
  let Send=ref(false)
  let Sends=function(){
    Send.value=true
  }
  let arr=ref([
    {  
      id:'1',
      author:'nanutor',
      mailbox:'nanutor@example.com'
    }
  ])
</script> -->
<!-- <template>

 <button @click="btnHome"  >Home </button><button @click="btnProfile">Profile</button><button @click="btnSettings">Settings</button>
 <component :is="compt"></component>

</template>
<script setup>
 import Home from './components/Home.vue';
 import Profile from './components/Profile.vue';
 import Settings from './components/Settings.vue';
 import { shallowRef } from 'vue';
 let compt=shallowRef(Home)
 let btnHome=function(){
   compt.value=Home
   console.log(compt);
   
 }
 let btnProfile=function(){
   compt.value=Profile
 }
 let btnSettings=function(){
   compt.value=Settings
 }
</script> -->

<!-- <template>
<RouterView></RouterView>
</template>
<style>
*{
  margin: 0px;
  padding: 0px;
}
</style> -->

<!-- <template>
  <input type="text" placeholder="请输入内容" v-model="a">
  <button @click="FnAdd">添加到列表</button>
  <div v-if="isN">列表为空</div>
  <li v-for="item in arr" v-else>
    {{ item }}
  </li>
</template>
<script setup>
import { ref } from 'vue';
let arr=ref([])
let a=ref('')
let isN=ref('ture')
let FnAdd=()=>{
  isN.value=false
  arr.value.push(a)
  a=''
}
</script> -->